<template>
  <div class="mar-t--25" ref="formAll">
    <el-form :model="form" label-width="130px" :rules="rules" ref="form" class="pad-t-15 mar-r--30">
      <el-form-item :label="contentInfo.labelName" class="one-label">
        <div class="pad-content" style="overflow: auto;">
          <div class="flex">
            <div class="menu-panel"></div>
            <div class="flex-item diy-bg-main">
              <div class="diy-phone diy-bg-box" v-if="contentInfo">
                <div class="phone-head"></div>
                <div class="phone-body">
                  <div class="phone-title border-b" id="page"></div>
                  <div class="phone-t-info pad-t-8" v-if="formFlag === '0'">
                    <h3>{{ contentInfo.title }}</h3>
                    <p>作者: {{ contentInfo.authorName }}</p>
                  </div>
                  <div class="phone-main main-box"></div>
                </div>
                <div class="phone-foot"></div>
              </div>
              <div class="clearfix diy-box" :class="formFlag === '1' ? 'goods-diy-box':''">
                <div>
                  <div class="diy-phone none-border">
                    <div class="ui-sortable">
                      <!-- {{listDetails}} -->
                      <draggable class="content-box" v-model="listDetails" dragable="true">
                        <template v-for="(item, index) in listDetails">
                          <!-- 文本预览 -->
                          <!-- {{item}} -->
                          <template v-if="item.authorType === 11">
                            <div class="drag-box" :id="'text-'+item.sortNo" :key="'text-'+index">
                              <div>
                                <div class="diy-content text-valign-l" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px '+ item.sideMargin+'px;'">
                                  <!--<div :class="item.textDTO.textSize+' '+item.textDTO.textAlign+' '-->
                                  <!--+item.textDTO.textColor+' '+item.textDTO.textShape+' '+item.textDTO.textColor">{{item.textDTO.content}}</div>-->
                                  <div v-html="item.textDTO.content" v-if="item.textDTO.content" class="richArea"></div>
                                  <div v-else class="text-valign-c">
                                    <p style="margin-top: 50px">这里是文章文本输入区！</p>
                                    <p>这里是文章文本输入区！</p>
                                    <p>这里是文章文本输入区！</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </template>
                          <!-- 图片预览 -->
                          <template v-else-if="item.authorType === 12">
                            <div class="drag-box" :id="'picture-'+item.sortNo" :key="'picture-'+index">
                              <div>
                                <div class="diy-content" v-if="item.pictureDTO.imgUrl"
                                  :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                                  <img :src="item.pictureDTO.imgUrl" :style="'width: 100%; padding: 0px '+ item.sideMargin+'px;'">
                                </div>
                                <div class="diy-content picture-default" v-else>
                                  <img :src="pictureDefault" border="0px">
                                </div>
                              </div>
                            </div>
                          </template>
                          <!-- 商品预览 -->
                          <template v-else-if="item.authorType === 13">
                            <!-- {{ item }} -->
                            <div class="drag-box" :id="'goods-'+item.sortNo" :key="'goods-'+index">
                              <div>
                                <template v-for="(itemGoods, index) in item.componentGoodsDTOS">
                                  <div class="diy-goods pos-rel" :class="item.listStyle == 2 ? 'width-per-50' : 'width-per-100' " :key="index"
                                    :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                                    <div v-if="itemGoods.sellType === 0" class="sell-out">
                                      <div class="out-bar"><span>已售空</span></div>
                                    </div>
                                    <div style="width: 100%; height: 145px; background: #e7e7e7;">
                                      <img v-if="itemGoods.imgUrl" :src="itemGoods.imgUrl" style="width: 100%; height: 100%">
                                    </div>
                                    <p>{{itemGoods.title}}</p>
                                    <div class="flex v-align-c price-bar">
                                      <span class="flex-item">￥{{ itemGoods.price }}</span>
                                      <label>购买</label>
                                    </div>
                                  </div>
                                </template>
                                <template v-if="item.componentGoodsDTOS.length === 0">
                                  <template v-for="(itemList, index) in Number(item.listStyle)">
                                    <div class="diy-goods pos-rel" :key="index" :class="item.listStyle === '2' ? 'width-per-50' : 'width-per-100' ">
                                      <div class="goods-default">
                                        <img :src="goodsDefault" border="0px">
                                      </div>
                                      <p>这里是商品标题</p>
                                      <div class="flex v-align-c price-bar">
                                        <span class="flex-item">￥100</span>
                                        <label>购买</label>
                                      </div>
                                    </div>
                                  </template>
                                </template>
                              </div>
                            </div>
                          </template>
                          <!-- 视频预览 -->
                          <template v-else-if="item.authorType === 16">
                            <div class="drag-box" :id="'video-'+item.sortNo" :key="'video-'+index">
                              <div>
                                <div class="diy-content" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                                  <video controls="controls" height="200px"
                                    :class="'video-w-' + item.componentVideoDTO.videoStyle"
                                    v-if="item.componentVideoDTO.videoUrl" :src="item.componentVideoDTO.videoUrl">
                                    <source type="video/mp4">
                                    Your browser does not support the video tag.
                                  </video>
                                  <img v-else :src="videoDefault" border="0px">
                                </div>
                              </div>
                            </div>
                          </template>
                          <!-- 音频预览 -->
                          <template v-else-if="item.authorType === 17">
                            <div class="drag-box" :id="'audio-'+item.sortNo" :key="'audio-'+index">
                              <div>
                                <div class="diy-content audio-box" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                                  <div class="audio-bar flex">
                                    <audio :id="'audioFile-'+item.sortNo" v-show="false" :src="item.audioDTO.audioUrl"></audio>
                                    <img :src="audioDefault" width="65" height="65" border="0px">
                                    <div class="flex-item">
                                      <h5>{{ item.audioDTO.title ? item.audioDTO.title : '未定义音频标题' }}</h5>
                                      <p>{{ item.audioDTO.subtitle ? item.audioDTO.subtitle : '副标题' }}</p>
                                    </div>
                                    <span class="pad-t-10 pad-r-10">{{ item.audioDTO.autoDuration }}</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </template>
                          <!-- 表单预览 -->
                          <template v-else-if="item.authorType === 14">
                            <div class="drag-box input-box" :id="'input-'+item.sortNo" :key="'input-'+index">
                              <div>
                                <div class="diy-content" :style="'background-color:'+ item.backColor+''">
                                  <div class="pad-t-10 pad-b-10 font-w">{{ item.formDTO.title }}</div>
                                  <template v-if="item.formDTO.formDetailDTOS.length > 0" v-for="(itemDetail, index) in item.formDTO.formDetailDTOS">
                                    <div class="input-show-bar font-12 pad-b-10">
                                      <p>
                                        <span class="font-red" v-if="itemDetail.needFlag.toString() === '1'">*</span>
                                        {{ itemDetail.formName }}
                                      </p>
                                      <el-input :placeholder="itemDetail.tipsName"/>
                                    </div>
                                  </template>
                                  <div class="pad-b-15">
                                    <el-button class="width-per-100 font-white font-16" size="small" :style="'background-color:'+ item.formDTO.buttonColor+''">{{ item.formDTO.buttonName }}</el-button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </template>
                          <!-- 辅助空白预览组件 -->
                          <template v-else-if="item.authorType === 10">
                            <div class="drag-box" :id="'space-'+item.sortNo" :key="'space-'+index">
                              <div>
                                <div class="diy-content"></div>
                              </div>
                            </div>
                          </template>
                        </template>
                      </draggable>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog'
import BackToTop from '@/components/BackToTop'
import ComponentPictureForm from '@/components/ComponentTemplate/ComponentPictureForm'
import ComponentTextForm from '@/components/ComponentTemplate/ComponentTextForm'
import ComponentGoodsForm from '@/components/ComponentTemplate/ComponentGoodsForm'
import ComponentVideoForm from '@/components/ComponentTemplate/ComponentVideoForm'
import ComponentAudioForm from '@/components/ComponentTemplate/ComponentAudioForm'
import ComponentInputForm from '@/components/ComponentTemplate/ComponentInputForm'
import ComponentSpaceForm from '@/components/ComponentTemplate/ComponentSpaceForm'
import MultiFileUpload from '@/components/Upload/MultiFileUpload'
import { getTemplateList } from '@/api/componentTemplate/template'
import iconPanel1 from '@/assets/images/panel-1.png'
import iconPanel2 from '@/assets/images/panel-2.png'
import iconPanel3 from '@/assets/images/panel-3.png'
import iconPanel4 from '@/assets/images/panel-4.png'
import iconPanel5 from '@/assets/images/panel-5.png'
import iconPanel6 from '@/assets/images/panel-6.png'
import iconPanel7 from '@/assets/images/panel-7.png'
import iconPanel8 from '@/assets/images/panel-8.png'
import iconPanel9 from '@/assets/images/panel-9.png'
import pictureDefault from '@/assets/images/picture.png'
import videoDefault from '@/assets/images/video.png'
import audioDefault from '@/assets/images/audio.png'
import goodsDefault from '@/assets/images/goods.png'
import draggable from 'vuedraggable'
import { getToken } from '@/utils/auth'

export default {
  components: {
    ComponentPictureForm,
    ComponentTextForm,
    ComponentGoodsForm,
    ComponentVideoForm,
    ComponentAudioForm,
    ComponentInputForm,
    ComponentSpaceForm,
    MultiFileUpload,
    BackToTop,
    draggable
  },
  directives: {
    // 拖动窗口
    elDragDialog
  },
  props: {
    templateId: {
      type: String
    },
    contentInfo: {
      type: Object,
      default: {
        labelName: '内容详情'
      }
    },
    formFlag: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      token: '',
      fileLoading: false,
      sortNo: 0,
      type: 0,
      title: '',
      authorName: '',
      form: {
        sortNo: 0,
        goodsName: '',
        category: '',
        type: [],
        resource: ''
      },
      template: {
        templateId: this.templateId,
        enterpriseId: this.getEnterpriseId(),
        articleType: 11,
        listDetails: []
      },
      details: {
        detailsId: '',
        templateId: '',
        sortNo: 0,
        authorType: 0,
        upperLowerMargins: 0,
        sideMargin: 0,
        backColor: '',
        textDTO: {
          textId: '',
          detailsId: '',
          content: '',
          textSize: '',
          textShape: '',
          textAlign: '',
          textColor: ''
        },
        pictureDTO: {
          pictureId: '',
          detailsId: '',
          imgUrl: '',
          imgWidth: '',
          imgHeight: ''
        },
        componentGoodsDTOS: [],
        audioDTO: {
          audioId: '',
          detailsId: '',
          title: '',
          subtitle: '',
          loopPlayback: '0',
          autoPlayback: '0',
          autoDuration: ''
        },
        componentVideoDTO: {
          videoId: '',
          detailsId: '',
          videoStyle: '1',
          videoImg: '',
          videoName: '',
          videoUrl: ''
        },
        formDTO: {
          componentFormId: '',
          detailsId: '',
          title: '联系我们',
          buttonName: '确定提交',
          buttonColor: '#409EFF',
          formDetailDTOS: []
        },
        sellType: '0',
        listStyle: '1'
      },
      componentGoods: {
        componentGoodsId: '',
        detailsId: '',
        goodsSortNo: '',
        imgUrl: '',
        imgWidth: '',
        imgHeight: ''
      },
      rules: {
        goodsName: [
          { required: true, message: '请填写商品名称', trigger: 'blur' }
        ]
      },
      pictureFormData: null,
      textFormData: null,
      goodsFormData: null,
      videoFormData: null,
      audioFormData: null,
      inputFormData: null,
      spaceFormData: null,
      scrollNumber: 0,
      listDetails: [],
      itemIndex: null,
      boxFormBoolean: false,
      fetchVisible: false,
      url: '',
      urlType: '1',
      urlTypes: {
        '1': '微信公众号',
        '2': '今日头条'
      },
      loading: '',
      oneNames: ['1'],
      twoNames: ['1'],
      threeNames: ['1'],
      iconPanel: [
        { icon: iconPanel1 },
        { icon: iconPanel2 },
        { icon: iconPanel3 },
        { icon: iconPanel4 },
        { icon: iconPanel5 },
        { icon: iconPanel6 },
        { icon: iconPanel7 },
        { icon: iconPanel8 },
        { icon: iconPanel9 }
      ],
      pictureDefault: pictureDefault,
      videoDefault: videoDefault,
      audioDefault: audioDefault,
      goodsDefault: goodsDefault,
      dialogVisible: false
    }
  },
  watch: {
    'type'(val) {
      this.type = val
      if (val) {
        this.boxFormBoolean = true
      }
    }
  },
  mounted() {
    if (!this.contentInfo.labelName) {
      this.contentInfo.labelName = '内容详情'
    }
    const that = this
    // 文本表单值设置
    this.$bus.$on('textFormData', function(data) {
      that.listDetails[data.sortNo] = data
    })
    // 图片表单值设置
    this.$bus.$on('pictureFormData', function(data) {
      that.listDetails[data.sortNo] = data
    })
    // 商品表单值设置
    this.$bus.$on('goodsFormData', function(data) {
      that.listDetails[data.sortNo] = data
    })
    // 视频表单值设置
    this.$bus.$on('videoFormData', function(data) {
      that.listDetails[data.sortNo] = data
    })
    // 音频表单值设置
    this.$bus.$on('audioFormData', function(data) {
      setTimeout(() => {
        that.listDetails[data.sortNo] = data
        const audio = document.getElementById('audioFile-' + data.sortNo)
        let secondTime = parseInt(audio.duration)// 秒
        let minuteTime = 0
        let hourTime = 0
        if (secondTime > 60) {
          minuteTime = parseInt(secondTime / 60)
          secondTime = parseInt(secondTime % 60)
          if (minuteTime > 60) {
            hourTime = parseInt(minuteTime / 60)
            minuteTime = parseInt(minuteTime % 60)
          }
        }
        // 时处理
        if (hourTime === 0) {
          hourTime = '00:'
        } else if (hourTime > 0 && hourTime < 10) {
          hourTime = '0' + hourTime + ':'
        } else {
          hourTime = hourTime + ':'
        }
        // 分处理
        if (minuteTime === 0) {
          minuteTime = '00:'
        } else if (minuteTime > 0 && minuteTime < 10) {
          minuteTime = '0' + minuteTime + ':'
        } else {
          minuteTime = minuteTime + ':'
        }
        // 秒处理
        if (secondTime === 0) {
          secondTime = '00'
        } else if (secondTime > 0 && secondTime < 10) {
          secondTime = '0' + secondTime + ''
        } else {
          secondTime = secondTime + ''
        }
        that.listDetails[data.sortNo].audioDTO.autoDuration = hourTime + minuteTime + secondTime
      }, 100)
    })
    // 表单设置
    this.$bus.$on('inputFormData', function(data) {
      that.listDetails[data.sortNo] = data
    })
    // 辅助空白表单值设置
    this.$bus.$on('spaceFormData', function(data) {
      that.listDetails[data.sortNo] = data
    })
    // 删除表单值设置
    this.$bus.$on('removeIndex', function(data) {
      that.itemIndex = data
      that.listDetails.splice(that.itemIndex, 1)
    })
    // 1.修改接收templateId使用 by zkm
    // 1.修改接收templateId使用 by zkm
    this.$bus.$on('ComponentDetails.edit.getTemplateId', function(templateId) {
      that.template.templateId = null
      if (that.$utils.isExist(templateId)) {
        getTemplateList(templateId).then(response => {
          if (response.isError) return
          that.listDetails = response.data
          that.template.templateId = templateId
        })
      }
    })
  },
  // 初始化页面
  created() {
    this.token = { accessToken: getToken() }
    if (this.templateId) {
      this.initTemplate()
    }
  },
  methods: {
    initTemplate() {
      getTemplateList(this.templateId).then(response => {
        if (response.isError) return
        this.listDetails = response.data
        if (this.listDetails.length > 0 && this.listDetails[0]['textDTO']) {
          this.listDetails[0]['textDTO']['content'] = this.listDetails[0]['textDTO']['content'].replace(/src=/g, 'style="max-width:100%" src=')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.goods-default{
  background: #fe8096;
  min-height: 145px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input-box{
  .diy-content{
    padding: 0 15px;
  }
  .input-show-bar{
    p{
      margin: 0;
      padding-bottom: 5px;
      text-align: left;
      font-weight: bold;
    }
  }
}
.sell-out{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  .out-bar{
    background: rgba(0, 0, 0, 0.5);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 155px;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      display: block;
      width: 210px;
      height: 210px;
      // background:url('@/../../assets/images/sold-out.png') no-repeat;
    }
  }
}
.main-box{
  min-height: 605px!important;
}
.diy-bg-main{
  position: relative;
  min-height: 865px;
}
.diy-bg-box{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.diy-box{
  width: 100%;
  height: 605px;
  margin-top: 204px;
  overflow: auto;
  overflow-x: hidden;
  &.goods-diy-box{
    margin-top: 108px;
  }
  .diy-phone{
    position: relative;
    z-index: 10;
  }
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }
}
.diy-editor {
  position: absolute;
  left: 330px;
  top: 204px;
  width: 660px;
  height: auto;
  background: #fdfdfd;
  padding: 15px 10px;
  margin-left: 18px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 0px;
  display: block;
  min-height: 80px;
  &.text-editor{
    width: 610px;
  }
}
.diy-editor .editor-arrow {
    height: 0;
    position: relative;
}
.diy-editor .editor-arrow::after, .diy-editor .editor-arrow::before {
    position: absolute;
    font-family: simsun;
    content: "◆";
    top: 8px;
    left: -21px;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
    color: rgb(253, 253, 253);
    z-index: 111;
}
.diy-editor .editor-arrow:after {
    left: -22px!important;
    color: #ddd!important;
    z-index: 11!important;
}
.diy-editor .editor-arrow::after, .diy-editor .editor-arrow::before {
    position: absolute;
    font-family: simsun;
    content: "◆";
    top: 8px;
    left: -21px;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
    color: rgb(253, 253, 253);
    z-index: 111;
}
.panel-height{
    min-height: 130px;
}
.action-panel{
    background: #fff;
    border: 1px solid #ddd;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: fixed;
    left: 578px;
    bottom: 100px;
    width: 840px;
    z-index: 1002;
}
@media screen and (max-width: 1045px) {
    .action-panel{
      left: 398px;
    }
}
.diy-phone {
    float: left;
    width: 328px;
    // height: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    overflow: hidden;
    &.none-border{
      border: none;
      background: none;
      padding: 0px 10px;
      border-radius: 0;
    }
}
.diy-phone .phone-head {
    height: 44px;
    background: #fff;
    position: relative;
}
.diy-phone .phone-head:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 112px;
    height: 8px;
    width: 8px;
    background: #ddd;
    border-radius: 8px;
}
.diy-phone .phone-head:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 128px;
    height: 8px;
    width: 50px;
    background: #ddd;
    border-radius: 8px;
}
.diy-phone .phone-title {
    height: 54px;
    background: url(../../../assets/images/wx-top.png) 0 0 no-repeat;
    background-size: 100% auto;
    padding: 0 50px;
    font-size: 15px;
    color: #333333;
    text-align: center;
    line-height: 68px;
    cursor: default;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.phone-t-info{
  h3{
    margin: 0;
    height: 51px;
    line-height: 1.4;
    font-size: 18px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
  p{
    margin: 0;
    font-size: 12px;
  }
}
.diy-phone .phone-main {
    min-height: 280px;
    background: #f3f3f3;
    // border: 1px solid #ddd;
    // border-top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.diy-phone .phone-foot {
    height: 24px;
    width: 60px;
    margin: 15px auto 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.tips-top {
  background: #d9edf7;
  color: #259fdc;
  border: #c5dce7 1px solid;
  font-size: 12px;
  border-radius: 5px;
  padding: 8px 0 8px 15px;
  width: 840px;
  margin-bottom: 30px;
  display: inline-block;
}
.pad-content {
  padding: 0 0 0 27px;
  .menu-panel{
    background: #fafafa;
    width: 280px;
    margin-right: 46px;
    .panel-m-title{
      font-size: 18px;
      line-height: 1;
      padding: 16px 0;
    }
    .one-simple{
      color: #989fac;
      padding: 8px 0;
    }
  }
}
.span-bar {
  padding: 0 50px;
}
.remove-btn {
  padding: 7px 6px !important;
}
.long-input {
  width: 80%;
}
.long-input-2 {
  width: 55%;
  margin-right: 5%;
}
.long-input-3 {
  width: 55%;
}
.short-input {
  width: 20%;
}
.short-input-2 {
  width: 25%;
}
.default-input {
  width: 50%;
}
.tips {
  color: gray;
  font-size: 12px;
  line-height: 1.2;
  padding-top: 5px;
}
.picture {
  width: 130px;
  height: 130px;
  display: block;
}
.pic-bar {
  position: relative;
  .close-icon {
    position: absolute;
    right: -30px;
    top: -11px;
    width: 31px;
    height: 40px;
    padding: 0 7px;
    cursor: pointer;
  }
  span {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
    padding: 3px 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
}
.pic-add {
  background: #fff;
  border: #d3d3d3 1px dashed;
  border-radius: 5px;
  padding: 0 45px;
}
.gds{
  font-weight: bolder;
  font-style: italic;
  text-decoration: none;
}
.drag-box{
  position: relative;
}
.drag {
  position: relative;
  min-height: 20px;
  height: auto;
  line-height: 1.3;
  display: block;
  overflow: hidden;
  &:after{
    content: '';
    display: block;
    clear: both;
    font-size: 0;
  }
}
.drag.selected:before, .drag:hover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px dashed #00a0e9;
  cursor: move;
  z-index: 10;
}
.diy-content {
  min-height: 200px;
  display: block;
  margin: 0;
  padding: 0;
  height: auto;
  overflow: hidden;
  line-height: 1.3;
  background: #fff;
  text-align: center;
  &.text-valign-l{
    text-align: left!important;
    padding: 0 10px!important;
    .text-valign-c{
      text-align: center!important;
    }
  }
  &.picture-default{
    background: #81d5f9;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &.audio-box{
    min-height: auto;
    .audio-bar{
      text-align: left!important;
      background: #fcfcfc;
      border: #e0e0e0 1px solid;
      border-radius: 5px;
      font-size: 12px;
      color: #888888;
      margin: 20px 0px;
      img{
        margin-right: 15px;
      }
      h5{
        margin: 10px 0 5px 0;
        font-size: 14px;
        color: #333333;
        height: 20px;
        line-height: 1.3;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        word-break:break-word;
      }
      p{
        margin: 0;
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
.diy-goods{
  text-align: left;
  margin-bottom: 10px!important;
  float: left;
  &.width-per-50{
    width: 48%;
    margin-left: 1%!important;
    margin-right: 1%!important;
    background: #fff;
  }
  &.width-per-100{
    background: #fff;
  }
  p{
    font-size: 14px;
    margin: 0 0 7px 0;
    padding: 0 10px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  .price-bar{
    font-size: 14px;
    color: #ff3131;
    padding: 0 10px 10px 10px;
    height: 32px;
    label{
      border: #ff3131 1px solid;
      border-radius: 3px;
      padding: 0px 12px;
      height: 30px;
      line-height: 30px;
    }
  }
}
.btn-edit-del {
  height: 16px;
  position: absolute;
  right: 2px;
  bottom: 12px;
  display: block;
  z-index: 90;
  font-size: 14px;
}
.btn-edit-del > div {
  width: 32px;
  height: 16px;
  line-height: 16px;
  display: inline-block;
  text-align: center;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,.4);
  margin-left: 2px;
  cursor: pointer;
  position: relative;
  z-index: 11;
}
</style>
